<template>
	<view class="maskLayer-container">
		<view class="maskLayer-container-box">
			<text style="color:#FFDB06">游戏规则</text>
			<text>在记忆时间内看一遍所有卡牌，记忆时间（15秒）结束后开始游戏，游戏时间60秒，每点击一张卡牌后，需要找到相同的另一张卡牌即可配对成功，所有卡牌匹配完成后即通关。</text>
			<view class="btn" @click="rulesHide">关闭按钮</view>
		</view>
 	</view>
</template>

<script>
	export default {
		methods:{
			rulesHide(){
				this.$emit("handleRulesStatus")
			}
		}
	}
</script>

<style scoped lang="scss">
.maskLayer-container{
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	box-sizing: border-box;
	display:flex;
	justify-content: center;
	align-items: center;
	background-color:rgba(0,0,0,0.5);
	z-index:999;
	.maskLayer-container-box{
		width:80%;
		height:40%;
		background: #951E13;
		border: 6rpx solid #FFF0BD;
		border-radius: 20rpx;
		padding:10rpx;
		display:flex;
		flex-direction: column;
		align-items:center;
		font-size:32rpx;
		color:#FFFFFF;
		& > *{
			margin:10rpx;
		}
		.btn{
			width:80%;
			height:80rpx;
			background: linear-gradient(0deg, #FFA239, #FFDF02);
			border-radius:10rpx;
			text-align:center;
			line-height:80rpx;
			color:#CC252C;
			font-size:28rpx;
			font-weight:bold;
			margin-top:20rpx;
		}
	}
}
</style>
